<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
      .btns {
          display: flex;
      }

      .btn {
          width: 100px;
          padding: 5px;
          border: 1px solid #eee;
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          cursor: pointer;
      }


  </style>

</head>
<body>
<div class="app">
  <div class="current">当前坐标(<span class="position">100</span>)</div>
  <div class="current">当前速度(<span class="speed">3</span>)</div>
  <div class="btns">
    <div class="btn run" onclick="goRun()" >跑</div>

    <div class="btn plus" onclick="speedControl(1)">+</div>
    <div class="btn minus" onclick="speedControl(2)">-</div>
  </div>

</div>

<script>
  // 通过面向对象的方式(类+实例) 控制一个人跑步  速度不能小于1,所有的方法只能写在类里面

  /*
  *
  * class People{
  *   {你需要实现的代码}
  * }
  * const p = new People(3, 2)   第一个参数是起始横坐标,第二个参数是起始速度
  *
  * */


  // 知识点:
  // 1.获取dom元素
  // 2.给dom添加点击事件监听的回调函数
  // 3.类
  class People {
    speedControl = function (index) {
      var dom = document.getElementsByClassName("speed")
      var speed = dom[0].innerHTML;
      console.log(speed);
      if (index == 1) {
        speed++;
      } else if (index == 2) {
        if (speed < 2) {
          console.log("smaller than 1 is not allowed!");
        } else {
          speed--;
        }
      }
      this.speed = speed;
      dom[0].innerHTML = speed;
    }

    run = function () {
      var dom = document.getElementsByClassName("position")   // dom对象

      var position = parseInt(dom[0].innerHTML);

      position = position + this.speed

      dom[0].innerHTML = position;
    }

    updateView() {

    }


    constructor(xIndex, speed) {
      this.xIndex = xIndex;
      this.speed = speed;


      //初始化速度、坐标
      const dom = document.getElementsByClassName("speed")
      dom[0].innerHTML = this.speed;
      const dom1 = document.getElementsByClassName("position")
      dom1[0].innerHTML = this.xIndex;


    }

  }

  const b = new People(3, 2)

  function goRun() {
    b.run();
  }

  function speedControl(index) {
    b.speedControl(index)
  }


</script>
</body>
</html>
